<template>
  <div class="home">
      <div class="header flex_between m-32">
          <div class="inputNav"><input type="text" placeholder="您想找什么" @click='search'/></div>
         <div class="btn_addd" @click='release'><img :src="rightIcon" width="100%" height="100%"/></div>
      </div>
      <div class="centerNav">
        <div class="lunbo">
          <!-- <van-swipe :autoplay="3000" indicator-color="white" style="height:150px">
            <van-swipe-item v-for="(image, index) in images" :key="index">
              <img :src="image" />
            </van-swipe-item>
          </van-swipe> -->
          <div class="bannerBox">
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in images" :key="index">
                  <img :src="item" alt="">
                </div>
              </div>
            </div>
          </div>

        </div>
        <div class="message">
          <!-- <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> -->
            <van-list
              v-model="loading"
              :finished="finished"
              @load="onLoad"
              finished-text="没有更多了"
              :immediate-check="false">



                <van-tabs v-model="active" @click="tabsClick">
                  <van-tab title="最新帖子">
                    <div class="gzh border_three">
                      <div class="top flex_between">
                        <div class="title"><img src="../../../public/images/qt_117.png"/>公众号推荐</div>
                        <div class="more" @click='$router.push({path:"/gzh"})'>更多</div>
                      </div>
                      <van-swipe  indicator-color="#333" style="height:150px" v-if='gzhArray.length!=0'>
                        <van-swipe-item v-for="(item, index) in gzhArray" :key="index">
                            <div class="gzhPeople flex_around" >
                              <div class="" v-for="(items, indexs) in item" :key="indexs">
                                <img :src="items.userPhoto" class="pic"/>
                                <p>{{items.userName? items.userName : '暂未设置'}}</p>
                                <img @click='gz(items.userId,items.isFollow)' src="../../../public/images/qt_50.png" v-if='items.isFollow=="-1"' class="gz" />
                                <img @click='gz(items.userId,items.isFollow)' src="../../../public/images/qt_53.png" v-else class="gz" />
                              </div>
                            </div>
                        </van-swipe-item>
                      </van-swipe>
                    </div>




                    <div :class="index==0? 'tieActive tie border_three' : 'tie border_three' " v-for="(item,index) in order" :key='index' @click='$router.push({path:"invitationContent",query:{postId:item.postId}})'>
                      <div class="top mt-10">
                        <img :src="item.userInfo.userPhoto" class="pic l" @click.stop='$router.push({path:"otherUser",query:{userId:item.userInfo.userId}})'/>
                        <div class="txt1 l">
                          <div class="title"><div class="name hide_other">{{item.userInfo.userName}}</div><div class="typeName" v-if='item.userInfo.roleName=="公众号"'>公众号</div><div class="clear"></div></div>
                          <div class="time">{{item.dbCreateTime}}</div>
                        </div>
                        <img @click.stop='gz(item.userInfo.userId,item.userInfo.isFollow)' src="../../../public/images/qt_50.png" v-if='item.userInfo.isFollow=="-1"' class="btn_gz r" />
                        <img @click.stop='gz(item.userInfo.userId,item.userInfo.isFollow)' src="../../../public/images/qt_53.png" v-else class="btn_gz r" />
                        <div class="clear"></div>
                      </div>
                      <div class="txt2 hide_otherFour" v-if='item.txtStatus'>{{item.content.slice(0,76)}}<span v-if="item.content.length>76" class="more" @click.stop='item.txtStatus=false'>查看更多>></span></div>
                      <div class="txt2" v-else>{{item.content}}<span v-if="item.content.length>76" class="more" @click.stop='item.txtStatus=true'>收起</span></div>
                      <div class="pic">
                        <img v-for='(items,indexs) in item.images.slice(0,9)' :key='indexs' :src="items"/>
                      </div>
                      <div class="bottom mt-30">
                        <div class="peopleNum l">868人看到</div>
                        <div class="otherNum2 r" @click.stop="dianzan(index,item.postId,0,item.isThumb)" v-if='item.isThumb==-1'>
                          <img src="../../../public/images/qt_80.png" />
                          {{item.thumbUpNum}}</div>
                        <div class="otherNum2 r" @click.stop="dianzan(index,item.postId,0,item.isThumb)" v-else>
                          <img src="../../../public/images/qt_107.png"/>
                          {{item.thumbUpNum}}</div>
                        <div class="otherNum1 r mr-50"><img src="../../../public/images/qt_78.png"/>{{item.commentNum}}</div>
                        <div class="clear"></div>
                      </div>
                    </div>

                    
                  </van-tab>
                  <van-tab title="我的关注">
                    <div class="tie border_three" v-for="(item,index) in order" :key='index'>
                      <div class="top mt-10">
                        <img :src="item.userInfo.userPhoto" class="pic l" @click.stop='$router.push({path:"otherUser",query:{userId:item.userInfo.userId}})'/>
                        <div class="txt1 l">
                          <div class="title"><div class="name hide_other">{{item.userInfo.userName}}</div><div class="typeName">公众号</div><div class="clear"></div></div>
                          <div class="time">{{item.dbCreateTime}}</div>
                        </div>
                        <div class="clear"></div>
                      </div>
                      <div class="txt2 hide_otherFour" v-if='item.txtStatus'>{{item.content.slice(0,76)}}<span v-if="item.content.length>36" class="more" @click.stop='item.txtStatus=false'>查看更多>></span></div>
                      <div class="txt2" v-else>{{item.content}}<span v-if="item.content.length>76" class="more" @click.stop='item.txtStatus=true'>收起</span></div>
                      <div class="pic">
                        <img v-for='(items,indexs) in item.images.slice(0,9)' :key='indexs' :src="items"/>
                      </div>
                      <div class="bottom mt-30">
                        <div class="peopleNum l">868人看到</div>
                        <div class="otherNum2 r"><img src="../../../public/images/qt_80.png"/>{{item.thumbUpNum}}</div>
                        <div class="otherNum1 r mr-50"><img src="../../../public/images/qt_78.png"/>{{item.commentNum}}</div>
                        <div class="clear"></div>
                      </div>
                    </div>
                  </van-tab>
                  <van-tab title="失物招领">
                    <div class="tie goodsdlq border_three" v-for="(item,index) in order" :key='index'>
                      <div class="top mt-10">
                        <img :src="item.userInfo.userPhoto" class="pic l" @click.stop='$router.push({path:"otherUser",query:{userId:item.userInfo.userId}})'/>
                        <div class="txt1 l">
                          <div class="title"><div class="name hide_other">{{item.userInfo.userName}}</div><div class="clear"></div></div>
                          <div class="time">{{item.dbCreateTime}}</div>
                        </div>
                        <div class="clear"></div>
                      </div>
                      <div class="txt2 hide_otherFour" v-if='item.txtStatus'>{{item.content.slice(0,76)}}<span v-if="item.content.length>76" class="more" @click.stop='item.txtStatus=false'>查看更多>></span></div>
                      <div class="txt2" v-else>{{item.content}}<span v-if="item.content.length>76" class="more" @click.stop='item.txtStatus=true'>收起</span></div>
                      <p class="goodsMessage hide_other">物品：<span>{{item.name}}</span></p>
                      <p class="goodsMessage hide_other">时间：<span>{{item.time}}</span></p>
                      <p class="goodsMessage hide_other">地点：<span>{{item.address}}</span></p>
                      <p class="goodsMessage hide_other">联系：<span>{{item.tel}}</span></p>
                      <div class="pic">
                        <img v-for='(items,indexs) in item.images.slice(0,9)' :key='indexs' :src="items"/>
                      </div>
                      <div class="bottom mt-30">
                        <div class="peopleNum l">868人看到</div>
                        <div class="clear"></div>
                      </div>
                    </div>
                  </van-tab>
                </van-tabs>
            </van-list>
          <!-- </van-pull-refresh> -->
        </div>
      </div>
      <!-- <p v-for="(item,index) in ceshi" :key='index'>{{item}}</p> -->
      <mt-footer></mt-footer>
  </div>
</template>

<script>
import Swiper from 'swiper';
import 'swiper/dist/css/swiper.min.css';
import storage from '@/common/store'
export default {
  data() {
    return {
      images:[
        require('../../../public/images/banner.png'),
        require('../../../public/images/banner.png'),
        require('../../../public/images/banner.png'),
        require('../../../public/images/banner.png'),
        require('../../../public/images/banner.png')
      ],
      tieImage:[
        require('../../../public/images/my_01.png'),
        require('../../../public/images/my_01.png'),
        require('../../../public/images/my_01.png'),
        require('../../../public/images/my_01.png'),
        require('../../../public/images/my_01.png'),
        require('../../../public/images/my_01.png'),
        require('../../../public/images/my_01.png')
      ],
      tieArray:[
        {pic:require('../../../public/images/qt_117.png'),name:'摄影协会',time:'2019年06月25日',message:'我们今天的付出我们今天的付出我们今天的付出，将会成就未来的自己，我们 今天的收获，一定是过去的付出'},
        {pic:require('../../../public/images/qt_117.png'),name:'摄影协会',time:'2019年06月25日',message:'我们今天的付出，将会成就未来的自己，我们 今天的收获，一定是过去的付出'},
        {pic:require('../../../public/images/qt_117.png'),name:'摄影协会',time:'2019年06月25日',message:'我们今天的付出，将会成就未来的自己，我们 今天的收获，一定是过去的付出'}

      ],
      active:0,
      rightIcon:require('../../../public/images/qt_56.png'),
      
      page:1,
      size:12,
      gzhArray:[],
      status:0,
      loading: false,
      finished: false,
      pages:1,
      isLoading:false,
      sizes:10,
      postType:1,
      order:[],
      totalNum:0,
    }
  },
  created() {
    this.getGzh();
    this.getMessage();
    
  },
  methods: {
    getGzh(){
      this.gzhArray=[];
      this.$get(this.$api.blog.accounts,{size:this.size,page:this.page}).then(data=>{
        data.data.curPageData.forEach((item,index,array)=>{
          if(!array[index].userPhoto) array[index].userPhoto=require('../../../public/images/avtor.png');
        })
        // data.data.curPageData=data.data.curPageData.concat(data.data.curPageData)
        let totalNum=Number(data.data.totalNum)<12? data.data.totalNum : 12;
        for(let i=0;i<totalNum;i+=4){
          this.gzhArray.push(data.data.curPageData.slice(i,i+4));
        }
      })
      console.log(this.gzhArray)
    },
    tabsClick(name,title){
      this.order=[];
      console.log(name,title);
      name==1? this.rightIcon=require('../../../public/images/qt_60.png') : this.rightIcon=require('../../../public/images/qt_56.png');
      this.postType=this.active+1;
      this.getMessage();
    },
    release(){
      console.log(this.active);
      switch(this.active){
        case 0:
          this.$router.push('/releaseInvitation');
          break;
        case 1:
          this.$router.push('/concern');
          break;
        case 2:
          this.$router.push('/releaseysShop');
          break;
      }
    },
    getMessage(){
      if(this.active==0){
        this.postType=1;
      }else if(this.active==1){
        this.postType=3;
      }else if(this.active==2){
        this.postType=2;
      };
      this.totalNum=0;
      this.pages=1;
      this.finished  = false;
      this.$get(this.$api.blog.posts,{size:this.sizes,page:this.pages,postType:this.postType}).then(data=>{
        data.data.curPageData.forEach((item,index,array)=>{
          array[index]=JSON.parse(item.content);
          array[index].postId=item.postId;
          array[index].thumbUpNum=item.thumbUpNum;
          array[index].commentNum=item.commentNum;
          array[index].userInfo=item.userInfo;
          array[index].dbCreateTime=this.ConvertIso(item.dbCreateTime);
          array[index].txtStatus=true;
          array[index].images=JSON.parse(item.images);
          array[index].isThumb=item.isThumb;
        })
        this.order=data.data.curPageData;
        console.log(Number(this.pages)*this.sizes,data.data.totalNum)
        if(Number(this.pages)*this.sizes>=data.data.totalNum) this.finished  = true;
        this.pages=2;
      });
    },
    onLoad() {
      console.log(2222)
      if(this.active==0){
        this.postType=1;
      }else if(this.active==1){
        this.postType=3;
      }else if(this.active==2){
        this.postType=2;
      };
      setTimeout(() => {
        this.$get(this.$api.blog.posts,{size:this.sizes,page:this.pages,postType:this.postType}).then(data=>{
          console.log((Number(this.pages)-1)*this.sizes<data.data.totalNum)
          data.data.curPageData.forEach((item,index,array)=>{
            array[index]=JSON.parse(item.content);
            array[index].postId=item.postId;
            array[index].thumbUpNum=item.thumbUpNum;
            array[index].commentNum=item.commentNum;
            array[index].userInfo=item.userInfo;
            array[index].dbCreateTime=this.ConvertIso(item.dbCreateTime);
            array[index].txtStatus=true;
            array[index].images=JSON.parse(item.images);
            array[index].isThumb=item.isThumb;
          })
          for (let i = 0; i < data.data.curPageData.length; i++) {
            this.order.push(data.data.curPageData[i]);
          };
          
          if(Number(this.pages)*this.sizes<data.data.totalNum){
            this.pages++;
            this.loading = false;
          }else{
            this.loading = false;
            this.finished  = true;
          }
          
        })
      }, 500);
    },
    onRefresh() {
      setTimeout(() => {
        this.$toast('刷新成功');
        this.isLoading = false;
        this.getMessage();
      }, 500);
    },
    search(){
      let searchType;
      if(this.active==2){
        searchType='1';
      }else{
        searchType='0';
      };
      this.$router.push({path:"search",query:{searchType:searchType}})
    },
    gz(userId,follow){
      let that=this;
      this.vueGz(userId,follow,function(){
        that.getGzh();
        that.getMessage();
      })
    },
    dianzan(index,targetId,targetType,isThumb){
      let that=this;
      this.vueLike(targetId,targetType,isThumb,function(data){
        that.getMessage();
        // that.$set(that.order[index],'isThumb',1);
        // that.$set(that.order[index],'thumbUpNum',Number(that.order[index].thumbUpNum)+1)
      })
    },
  },
  mounted() {
    let that = this;
    /* eslint-disable */
    let mySwiper = new Swiper('.swiper-container', {
      direction: 'horizontal', //滑动方向，可设置水平(horizontal)或垂直(vertical)。
      loop: true, // 设置为true 则开启loop模式
      autoplay: 3000, // 自动切换时间
      slidesPerView: 'auto', // 设置slider容器能够同时显示的slides数量(carousel模式)。类型：number or auto
      centeredSlides: true, // 设定为true时，active slide会居中，而不是默认状态下的居左。
      spaceBetween: 20, // 在slide之间设置距离（单位px）。
      loopAdditionaSlider: 0, // loop模式下会在slides前后复制若干个slide,，前后复制的个数不会大于原总个数。
      on: {
        slideChangeTransitionEnd: function(){
          if(this.activeIndex === 8 || this.activeIndex === 4 ) {
            that.bannerIndex = 1;
            that.bannerTxt = '';
          } else {
            that.bannerIndex = this.activeIndex-3;
            that.bannerTxt = '';
          }
        },
      },
    });
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .header{padding-top: 0.3rem;margin-bottom: 0.3rem;}
  .header .inputNav{position: relative;height: 0.64rem;position: relative;flex:1;}
  .header input{width: 100%;height: 100%;;font: 0.28rem/0.64rem '微软雅黑';color: #999999;text-indent: 0.8rem;background: #F5F5F5;border-radius:0.32rem;border: none;outline: none;display: block;}
  .header .inputNav::before{content: '';width: 0.3rem;height: 0.3rem;background: url('../../../public/images/qt_110.png') no-repeat;background-size: 100% 100%;position: absolute;left:0.3rem;top: 0.17rem;}
  .btn_addd {width: 0.5rem;height: 0.5rem;margin-top: 0.07rem;margin-left: 0.23rem;}
  .btn_addd img{display: block;}
  .lunbo{margin-top: 0.11rem;}

  .tieActive::before{content: '顶';width:0.45rem;height: 0.45rem;background-color: #F43711;font:0.24rem/0.45rem '微软雅黑';text-align: center;border-bottom-right-radius:0.24rem;position:absolute;left: 0;top: 0;color: #fff; }
  .goodslq::before{content: '已领取';background-color: #AAAAAA;width: 0.88rem;height: 0.42rem;text-align: center;border-bottom-left-radius: 0.21rem;font: 0.2rem/0.42rem '微软雅黑';position: absolute;right: 0;top: 0;color: #fff;}
  .goodsdlq::before{content: '待领取';background-color: #24C067;width: 0.88rem;height: 0.42rem;text-align: center;border-bottom-left-radius: 0.21rem;font: 0.2rem/0.42rem '微软雅黑';position: absolute;right: 0;top: 0;color: #fff;}
  .tie{padding: 0.3rem;position: relative;}
  .tie .top .pic{display: block;width: 0.8rem;height: 0.8rem;border-radius: 50%;overflow: hidden;}
  .tie .top .txt1{margin-left: 0.25rem;}
  .tie .top .txt1 .title .name{font: 0.32rem/0.45rem '微软雅黑';color: #4AACE9;max-width: 1.5rem;float: left;height: 0.45rem;}
  .tie .top .txt1 .typeName{float: left;width: 0.64rem;height: 0.32rem;margin: 0.06rem 0 0 0.2rem;border-radius: 0.04rem;background-color: #F88222;color: #fff;text-align: center;font: 0.16rem/0.32rem '微软雅黑';}
  .tie .top .txt1 .time{font:0.24rem/0.35rem '微软雅黑';color: #999999;}
  .tie .top .btn_gz{width: 1.16rem;height: 0.46rem;display: block;margin-top: 0.1rem;}
  .tie .txt2{font: 0.32rem/0.48rem '微软雅黑';color: #333333;margin: 0.3rem 0;}
  .tie .txt2 .more{color: #4AACE9;margin-left: 0.2rem;font: 0.3rem/0.4rem '微软雅黑';}
  .tie .pic img{display: inline-block;margin: 0.04rem 0.05rem 0.1rem 0.05rem;width:calc((100% - 0.3rem)/3);}
  .tie .bottom{font: 0.24rem/0.34rem '微软雅黑';color: #AAAAAA;}
  .tie .bottom .otherNum1{float: right;}
  .tie .bottom img{display: inline-block;width: 0.34rem;height: 0.34rem;margin-right: 0.1rem;margin-bottom: 0.05rem;}

  .gzh {padding: 0.3rem;}
  .gzh .top{margin: 0.25rem 0;}
  .gzh .top .title{font: 0.34rem/0.4rem '微软雅黑';color: #222222;}
  .gzh .top .title img{display: inline-block;width: 0.4rem;height: 0.4rem;margin-right: 0.16rem;}
  .gzh .top .more{font: 0.3rem/0.4rem '微软雅黑';color: #4AACE9;}
  .gzh .gzhPeople>div{width: 1.2rem;}
  .gzh .gzhPeople>div .pic{display: block;width: 1.2rem;height: 1.2rem;border-radius: 50%;overflow: hidden;}
  .gzh .gzhPeople>div p{font:0.28rem/0.7rem '微软雅黑';color: #000000;text-align: center;}
  .gzh .gzhPeople>div .gz{width: 1.16rem;height: 0.46rem;display: block;margin: 0 auto;}

  .goodsMessage{font: 0.28rem/0.5rem '微软雅黑';color:#333333;}
  .goodsMessage span{color: #4AACE9;}

  .centerNav{height:calc(100vh - 1.24rem - 50px);overflow-y: scroll;}



  .bannerBox{
  position: relative;
  height: 3rem;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-container .swiper-wrapper .swiper-slide {
  width: 80% !important;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* transition:all 0.5s; */
  
}
.swiper-container .swiper-wrapper .swiper-slide img {
  width: 100%;
  height: 3rem;
  border-radius: 5px;
  /* transition:all 0.8s; */
}
.swiper-container .swiper-wrapper .swiper-slide-prev,.swiper-container .swiper-wrapper .swiper-slide-next{
  height: 2.56rem !important;
  margin-top: 0.22rem;
  /* transition:all 0.8s; */
}
.swiper-container .swiper-wrapper .swiper-slide-prev img,.swiper-container .swiper-wrapper .swiper-slide-next img{
  width: 100%;
  height: 100%;
}
</style>
